<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>购物车页面</title>

	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
	<!-- 引入 layui.css -->
	<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	<!-- 引入 layui.js -->
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

	<script type="text/javascript" src="static/js/jquery.js"></script>


</head>

<body>
	<div id="container">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-if="isLogin">
						{{username}},欢迎您
					</div>
					<div class="menu-hd" v-else>
						亲，请<a href="login.html" target="_top" class="h">登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i
								class="am-icon-user am-icon-fw"></i>个人中心</a></div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
								class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
								class="h"></strong></a></div>
				</div>
				<div class="topMessage favorite">
					<div class="menu-hd"><a href="#" target="_top"><i
								class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
				</div>
			</ul>
		</div>


		<!--悬浮搜索框-->

		<div class="nav white">
			<div class="logo"><img src="static/images/logo.png" /></div>
			<div class="logoBig">
				<li><img src="static/images/logo.png" /></li>
			</div>

			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form>
					<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
						autocomplete="off">
					<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
				</form>
			</div>
		</div>

		<div class="clear"></div>

		<!--购物车 -->
		<div class="concent">
			<div id="cartTable">
				<div class="cart-table-th">
					<div class="wp">
						<div class="th th-chk">
							<div id="J_SelectAll1" class="select-all J_SelectAll">

							</div>
						</div>
						<div class="th th-item">
							<div class="td-inner">商品信息</div>
						</div>
						<div class="th th-price">
							<div class="td-inner">单价</div>
						</div>
						<div class="th th-amount">
							<div class="td-inner">数量</div>
						</div>
						<div class="th th-sum">
							<div class="td-inner">金额</div>
						</div>
						<div class="th th-op">
							<div class="td-inner">操作</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>

				<div class="clear"></div>

				<template v-for="(sc,index) in shopcarts">
					<tr class="item-list">
						<div class="bundle  bundle-last ">

							<div class="clear"></div>
							<div class="bundle-main">
								<ul class="item-content clearfix">
									<li class="td td-chk">
										<div class="cart-checkbox ">
											<input class="check" id="J_CheckBox_170769542747" name="items[]"
												v-model="opts" :value="index" type="checkbox">
											<label for="J_CheckBox_170769542747"></label>
										</div>
									</li>
									<li class="td td-item">
										<div class="item-pic">
											<a href="#" target="_blank" :data-title="sc.productName" class="J_MakePoint"
												data-point="tbcart.8.12">
												<img :src="'static/pimgs/' + sc.productImg" height="70"
													class="itempic J_ItemImg"></a>
										</div>
										<div class="item-info">
											<div class="item-basic-info">
												<a :href="'introduction.html?pid='+sc.productId" target="_blank"
													:title="sc.productName" class="item-title J_MakePoint"
													data-point="tbcart.8.11">{{sc.productName}} | {{sc.skuName}}</a>
											</div>
										</div>
									</li>
									<li class="td td-info">
										<div class="item-props item-props-can">
											<span class="sku-line">{{sc.skuProps}}</span>
										</div>
										<!-- <div class="item-props item-props-can">
											<span class="sku-line">颜色：10#蜜橘色</span>
											<span class="sku-line">包装：两支手袋装（送彩带）</span>
											<span tabindex="0" class="btn-edit-sku theme-login">修改</span>
											<i class="theme-login am-icon-sort-desc"></i>
										</div> -->
									</li>
									<li class="td td-price">
										<div class="item-price price-promo-promo">
											<div class="price-content">
												<div class="price-line">
													<em class="price-original">{{sc.originalPrice}}</em>
												</div>
												<div class="price-line">
													<em class="J_Price price-now" tabindex="0">{{sc.sellPrice}}</em>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-amount">
										<div class="amount-wrapper ">
											<div class="item-amount ">
												<div class="sl">
													<input class="min am-btn" name="" type="button" value="-"
														:data-id="index" @click="changeNum" data-oper="-" />
													<input class="text_box" name="" type="text" :value="sc.cartNum"
														style="width:30px;" />
													<input class="add am-btn" name="" type="button" value="+"
														:data-id="index" @click="changeNum" data-oper="+" />
												</div>
											</div>
										</div>
									</li>
									<li class="td td-sum">
										<div class="td-inner">
											<em tabindex="0" class="J_ItemSum number">{{sc.sellPrice * sc.cartNum}}</em>
										</div>
									</li>
									<li class="td td-op">
										<div class="td-inner">
											<!-- <a title="移入收藏夹" class="btn-fav" href="#">
												移入收藏夹</a> -->
											<a href="javascript:;" data-point-url="#" class="delete" :data-id="index"
												@click="deleteCart">
												删除</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</tr>
				</template>

			</div>
			<div class="clear"></div>

			<div class="float-bar-wrapper">
				<!-- <div id="J_SelectAll2" class="select-all J_SelectAll">
					<div class="cart-checkbox">
						<input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true"
							type="checkbox">
						<label for="J_SelectAllCbx2"></label>
					</div>
					<span>全选</span>
				</div> -->
				<div class="operations">
					<!-- <a href="#" hidefocus="true" class="deleteAll">删除</a> -->
					<!-- <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a> -->
				</div>
				<div class="float-bar-right">
					<div class="amount-sum">
						<span class="txt">已选商品</span>
						<em id="J_SelectedItemsCount">{{opts.length}}</em><span
							class="txt">件</span>
						<div class="arrow-box">
							<span class="selected-items-arrow"></span>
							<span class="arrow"></span>
						</div>
					</div>
					<div class="price-sum">
						<span class="txt">合计:</span>
						<strong class="price">¥<em id="J_Total">{{totalPrice}}</em></strong>
					</div>
					<div class="btn-area" @click="orderSubmit">
						<a id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
							<span>结&nbsp;算</span></a>
					</div>
				</div>

			</div>

			<div class="footer ">
				<div class="footer-hd ">
					<p>
						<a href="# ">思源商城</a>
						<b>|</b>
						<a href="# ">商城首页</a>
						<b>|</b>
						<a href="# ">支付宝</a>
						<b>|</b>
						<a href="# ">物流</a>
					</p>
				</div>
				<div class="footer-bd ">
					<p>
						<a href="# ">wendasu</a>
						<a href="# ">合作伙伴</a>
						<a href="# ">联系我们</a>
						<a href="# ">网站地图</a>
						<em>©sjtu.edu.cn 版权所有</em>
					</p>
				</div>
			</div>

		</div>

		<!--操作页面-->

		<div class="theme-popover-mask"></div>

		<div class="theme-popover">
			<div class="theme-span"></div>
			<div class="theme-poptit h-title">
				<a href="javascript:;" title="关闭" class="close">×</a>
			</div>
			<div class="theme-popbod dform">
				<form class="theme-signin" name="loginform" action="" method="post">

					<div class="theme-signin-left">

						<li class="theme-options">
							<div class="cart-title">颜色：</div>
							<ul>
								<li class="sku-line selected">12#川南玛瑙<i></i></li>
								<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
							</ul>
						</li>
						<li class="theme-options">
							<div class="cart-title">包装：</div>
							<ul>
								<li class="sku-line selected">包装：裸装<i></i></li>
								<li class="sku-line">两支手袋装（送彩带）<i></i></li>
							</ul>
						</li>
						<div class="theme-options">
							<div class="cart-title number">数量</div>
							<dd>
								<input class="min am-btn am-btn-default" name="" type="button" value="-" />
								<input class="text_box" name="" type="text" value="1" style="width:30px;" />
								<input class="add am-btn am-btn-default" name="" type="button" value="+" />
								<span class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</dd>

						</div>
						<div class="clear"></div>
						<div class="btn-op">
							<div class="btn am-btn am-btn-warning">确认</div>
							<div class="btn close am-btn am-btn-warning">取消</div>
						</div>

					</div>
					<div class="theme-signin-right">
						<div class="img-info">
							<img src="static/images/kouhong.jpg_80x80.jpg" />
						</div>
						<div class="text-info">
							<span class="J_Price price-now">¥39.00</span>
							<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
						</div>
					</div>

				</form>
			</div>
		</div>
		<!--引导 -->
		<div class="navCir">
			<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
			<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
		</div>
	</div>



	<script type="text/javascript" src="static/js/cookie_utils.js"></script>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<script type="text/javascript" src="static/js/base.js"></script>

	<script type="text/javascript">
		
		var layer;
		layui.use(['layer', 'form'], function () {
			layer = layui.layer;
		});
		var vm = new Vue({
			el: "#container",
			data: {
				username: "",
				token: "",
				shopcarts: [],
				isLogin: false,
				opts: [], // 选中了哪几件商品
				totalPrice: 0.00, //选中商品的总价

			},
			watch: {
				opts: function () {
					this.totalPrice = 0.0;
					// console.log(this.opts);
					for (var i = 0; i < this.opts.length; i++) {
						var index = this.opts[i]; //index就是购物车shopcarts的索引
						this.totalPrice = this.totalPrice + this.shopcarts[index].sellPrice * this.shopcarts[index].cartNum
					}
				}
			},
			created: function () {
				this.token = getCookieValue("token");
				if (this.token == null || this.token == "") {
					var loginUrl = "login.html?tips=请先登录!&returnUrl=shopcart.html"
					window.location.href = encodeURI(loginUrl);
				} else {
					//请求当前用户的购物车记录
					this.isLogin = true;
					this.username = getCookieValue("username");
					var userId = getCookieValue("userId");
					var url1 = baseUrl + "/shopcart/list";
					axios({
						url: url1,
						method: "get",
						headers: {
							token: this.token,
						},
						params: {
							userId: userId
						}
					}).then((res) => {
						// console.log(res.data);
						if (res.data.code == 20002 || res.data.code == 20001) {
							var loginUrl = "login.html?tips=请先登录!&returnUrl=shopcart.html"
							window.location.href = encodeURI(loginUrl);
						} else if (res.data.code == 10000) {
							//请求成功
							this.shopcarts = res.data.data;
						} else if (res.data.code == 10001) {
							//请求失败
							
						}
					})
				}

			},
			methods: {
				changeNum: function (event) {
					var oper = event.srcElement.dataset.oper;
					var index = event.srcElement.dataset.id;
					if (oper == "+") {
						this.shopcarts[index].cartNum = parseInt(this.shopcarts[index].cartNum) + 1;
					} else if (oper == "-" && this.shopcarts[index].cartNum > 1) {
						this.shopcarts[index].cartNum = parseInt(this.shopcarts[index].cartNum) - 1;
					}
					//请求购物车修改接口：cartId，cartNum
					var cid = this.shopcarts[index].cartId;
					var cnum = this.shopcarts[index].cartNum;
					var url2 = baseUrl + "/shopcart/update/" + cid + "/" + cnum;
					axios({
						url: url2,
						method: "put",
						headers: {
							token: this.token
						},
					}).then((res) => {
						if (res.data.code == 10000) {
							this.totalPrice = 0;
							for (var i = 0; i < this.opts.length; i++) {
								var index = this.opts[i]; //index就是购物车shopcarts的索引
								this.totalPrice = this.totalPrice + this.shopcarts[index].sellPrice * this.shopcarts[index].cartNum
							}
						}
					});
				},
				deleteCart: function (event) {
					var index = event.srcElement.dataset.id;
					// console.log(index);
					var cid = this.shopcarts[index].cartId;
					var url3 = baseUrl + "/shopcart/delete/" + cid;
					this.shopcarts.splice(index, 1);
					axios({
						url: url3,
						method: "delete",
						headers: {
							token: this.token
						},
					}).then((res) => {
						var vo = res.data;
						if (vo.code == 10000) {
							//删除成功
							layer.msg("删除成功");
						}
					});
				},
				orderSubmit: function () {
					//1.获取选择的购物车记录的id（购物车记录）
					if (this.opts.length == 0) {
						layer.msg("请选择想要购买的商品");
					} else {
						var cids = "";
						for (var i = 0; i < this.opts.length; i++) {
							var index = this.opts[i];
							var cid = this.shopcarts[index].cartId;
							cids = cids + cid + ",";
						}
						cids = cids.substr(0, cids.length - 1);
						console.log(cids);
						//2.跳转到order-add.html页面，并将cids携带传递过去
						window.location.href = "order-add.html?cids=" + cids;
					}
				}
			}
		})

	</script>





</body>

</html>